<!-- 自定义专题图表 可按照1920X1080设置固定尺寸 通过封装方法适配缩放尺寸 只可以替换数据 无其他高级属性自定义扩展 
  注:业务专题图表的图片存放文件夹名称需与当前文件名一致(打包时才会将图片打包进对应文件夹中)
  (1.并在aircim.webpack.build.component.config.js配置需要打包的文件2.npm run lib_c 执行打包命令  最后的组件会打包在components/grids中) -->
<template>
  <div class="scale-box" :id="dynamicIdName()">
    <!-- 设置动态类名以及交互方法 注!! 必须设置行内样式宽高同步 -->
    <div
      class="ancientCanalsLeft animate__animated"
      :class="dynamicClassName"
      style="width: 443px; height: 925px"
      :id="dynamicChildName()"
      @click="clickFn()"
      @dblclick="dblclickFn()"
      @mouseenter="mouseenterFn()"
      @mouseleave="mouseleaveFn()"
    >
      <div class="combo-position-box" @click.stop="shrinkFn()">
        <img
          src="../static/assets/ancientCanalsLeft/shrinkLeft.png"
          alt=""
          v-if="shrinkStatus == true"
        />
        <img
          src="../static/assets/ancientCanalsLeft/shrinkLeftTwo.png"
          alt=""
          v-else
        />
      </div>
      <div class="combo-top-box">
        <div class="grid_title">
          {{ echartdata.data1.name }}
        </div>
        <div class="grid_content">
          <div class="show-img">
            <img
              src="../static/assets/ancientCanalsLeft/showImg.png"
              alt=""
            />
          </div>
          <div class="text-box">{{ echartdata.data1.remark }}</div>
        </div>
      </div>
      <div class="combo-center-box">
        <div class="grid_title">
          {{ echartdata.data2.name }}
        </div>
        <div class="grid_content">
          <div class="card-item">
            <span class="label">今日：</span>
            <span class="value">
              <span
                ><img
                  src="../static/assets/ancientCanalsLeft/sun.png"
                  alt=""
                  v-if="echartdata.data2.weather == '1'"
              /></span>
              <img
                src="../static/assets/ancientCanalsLeft/cloud.png"
                alt=""
                v-if="echartdata.data2.weather == '2'"
              />
              <img
                src="../static/assets/ancientCanalsLeft/rain.png"
                alt=""
                v-if="echartdata.data2.weather == '3'"
              />
              <img
                src="../static/assets/ancientCanalsLeft/snow.png"
                alt=""
                v-if="echartdata.data2.weather == '4'"
              />
              <span>{{
                echartdata.data2.weather === "1"
                  ? "晴"
                  : echartdata.data2.weather === "2"
                  ? "多云"
                  : echartdata.data2.weather === "3"
                  ? "雨"
                  : echartdata.data2.weather === "4"
                  ? "雪"
                  : ""
              }}</span>
            </span>
          </div>
          <div class="card-item">
            <span class="label">温度：</span>
            <span class="value">{{ echartdata.data2.humidity }}</span>
          </div>
          <div class="card-item">
            <span class="label">空气质量：</span>
            <span class="value">{{ echartdata.data2.airQuality }}</span>
          </div>
          <div class="card-item">
            <span class="label">湿度：</span>
            <span class="value">{{ echartdata.data2.temperature }}</span>
          </div>
        </div>
      </div>
      <div class="combo-bottom-box">
        <div class="grid_title">
          {{ echartdata.data3.title }}
        </div>
        <div class="grid-charts" ref="chartsGuYunHeLeftRef"></div>
      </div>
    </div>
  </div>
</template>

<script>
//引入echarts图表
import echarts from "echarts";
//混入封装方法
import encapsulation from "../utils/aircimGird";

export default {
  name: "ancientCanalsLeft",
  grid_specification: "aircim_grid_1x1",
  mixins: [encapsulation],
  data() {
    return {
      //控制左右标签缩放状态
      shrinkStatus: true,
      //图表数据
      echartdata: {
        data1: {
          name: "无锡古运河景点简介",
          remark:
            "大运河无锡段，北起常州与无锡交界的五牧(今届洛杜镇)，南到无锡与苏州交界的望亭，全长约41公里，拥有京杭运河全线通航条件最好、船舶通过量最大、社会经济效益发挥最为显著的区段，是名副其实的“黄金水道”。依江抱湖、因水而生、因水而兴的无锡，也享有“江南水弄堂，运河绝版地”的美誉。无锡是古运河穿城而过的城市，无锡古运河开拓最早、保护最好，既是古运河发源地，又最具原生态文化风貌，被誉为古运河文化绝版之地。运河人家鳞次栉比，寺、塔、河、街桥、窑、坊众多景观组成“水弄堂”特色环境，被称为古运河“精华中的精华”。",
        },
        data2: {
          name: "环境概况",
          weather: "1",
          humidity: "30°C",
          airQuality: "优",
          temperature: "30°C",
        },
        data3: {
          title: "景区实时人流",
          city: ["14:48", "14:51", "14:54", "14:57", "15:03", "15:06"],
          num: ["40", "60", "50", "85", "22", "40"],
        },
      },
      //图表实例
      myLeftOneChart: null,
      //监听图表变化
      resizeObserver: null,
      //动态Id
      timestamp: null,
    };
  },
  methods: {
    shrinkFn() {
      this.shrinkStatus = !this.shrinkStatus;
      //使用父级方法对其进行左右缩放
      this.$parent.shrinkLeftStatusFn(this.shrinkStatus);
    },
    //初始化方法
    initGrid() {
      setTimeout(() => {
        this.myLeftEcharts();
      }, 1000);
    },
    //刷新数据方法
    refreshData(val) {
      this.echartdata = val.echartdata;
    },
    refreshConfig(val) {},
    //监听外部盒子的大小 然后对数据井行缩放
    scaleFn() {
      const parentBox = document.getElementById(`dynamic-${this.timestamp}`);
      const childBox = document.getElementById(
        `dynamicChild-${this.timestamp}`
      );
      const parentWidth = parentBox.offsetWidth;
      const parentHeight = parentBox.offsetHeight;
      const childWidth = childBox.offsetWidth;
      const childHeight = childBox.offsetHeight;
      let scaleX, scaleY;
      if (parentWidth < childWidth || parentHeight < childHeight) {
        const scaleBasedOnWidth = parentWidth / childWidth;
        const scaleBasedOnHeight = parentHeight / childHeight;
        scaleX = scaleBasedOnWidth;
        scaleY = scaleBasedOnHeight;
      } else {
        scaleX = parentWidth / childWidth;
        scaleY = parentHeight / childHeight;
      }
      childBox.style.transform = `scale(${scaleX}, ${scaleY})`;
    },
    // 监听盒子变化
    listenChangeFn() {
      let that = this;
      const element = document.getElementById(`dynamic-${this.timestamp}`);
      // console.log(element, "element");
      if (element) {
        new ResizeObserver(() => {
          // 处理元素大小变化的逻辑
          that.scaleFn();
        }).observe(element);
      }
    },
    // 绑定动画样式 animate__flash
    bindAnimationFn(animateName) {
      if (animateName != null) {
        this.dynamicClassName = animateName;
      }
    },
    //定义唯一ID名
    dynamicIdName() {
      return `dynamic-${this.timestamp}`;
    },
    //定义唯一ID名
    dynamicChildName() {
      return `dynamicChild-${this.timestamp}`;
    },
    //图表初始化方法
    myLeftEcharts() {
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(255,255,255,0)", // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: "rgba(255,255,255,1)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(255,255,255,0)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        },
        grid: {
          left: "15%",
          // containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: {
              //坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                color: "#092b5d",
              },
            },
            // splitLine: {
            //   show: true,
            //   lineStyle: {
            //     color: "#092b5d",
            //   },
            // },
            axisLabel: {
              margin: 25, // 设置 X 轴标签离图表的距离为 15
              //坐标轴刻度标签的相关设置
              textStyle: {
                margin: 15,
                show: true, // 是否显示x轴标签
                color: "#fff", // x轴标签颜色
                fontSize: "16", // x轴标签字体大小
              },
              formatter: function(data) {
                return data;
              },
            },
            axisTick: {
              show: false,
            },
            data: this.echartdata.data3.city,
          },
        ],
        yAxis: [
          {
            name: "单位/人",
            nameTextStyle: {
              color: "#fff",
              fontSize: "14",
            },
            nameGap: 35,
            min: 0,
            max: 100,
            splitLine: {
              show: false,
              lineStyle: {
                color: "#092b5d",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#092b5d",
              },
            },
            axisLabel: {
              margin: 25,
              textStyle: {
                show: true, // 是否显示x轴标签
                color: "#fff", // Y轴标签颜色
                fontSize: "16", // y轴标签字体大小
              },
              formatter: function(value) {
                if (value === 0) {
                  return value;
                }
                return value;
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "实时人流",
            type: "line",
            symbol: null, // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: false,
            symbolSize: 0,
            lineStyle: {
              normal: {
                color: "#a7b3ec", // 线条颜色
              },
            },
            itemStyle: {
              color: "#3a4d79",
              borderColor: "#3a4d79",
              borderWidth: 2,
            },
            tooltip: {
              show: true,
            },
            areaStyle: {
              //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#a7b3ec",
                    },
                    {
                      offset: 1,
                      color: "#3a4d79",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },
            data: this.echartdata.data3.num,
          },
        ],
      };
      this.myLeftOneChart = echarts.init(this.$refs.chartsGuYunHeLeftRef);
      this.myLeftOneChart.setOption(option);
      this.myLeftOneChart.resize();
    },
  },
  mounted() {
    this.timestamp = new Date().getTime();
    this.$nextTick(() => {
      // 监听盒子变化
      this.listenChangeFn();
    });
  },

  computed: {},
  // 销毁监听
  beforeDestroy() {
    // 组件销毁前停止监听
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
    }
    if (this.requestTime != null) {
      clearInterval(this.requestTime);
    }
  },
};
</script>

<style lang="scss" scoped>

.scale-box {
  width: 100%;
  height: 100%;
  position: relative;
}

.ancientCanalsLeft {
  padding: 0px 10px;
  box-sizing: border-box;
  position: absolute;
  transform-origin: left top;
  display: flex;
  flex-direction: column;

  .combo-position-box {
    cursor: pointer;
    right: -28px;
    top: 25px;
    position: absolute;
    width: 28px;
    height: 86px;
    img {
      width: 100%;
      height: 100%;
    }
  }

  //左侧布局顶部盒子
  .combo-top-box {
    width: 100%;
    height: 345px;
    margin-bottom: 12px;
    background: url("../static/assets/ancientCanalsLeft/new-back.png")
      no-repeat;
    background-size: 100% 100%;
    .grid_title {
      position: relative;
      left: -15px;
      top: -5px;
      padding: 0px 55px;
      margin-left: 7px;
      width: calc(100% - 8px);
      height: 47px;
      box-sizing: border-box;
      font-size: 22px;
      line-height: 52px;
      background: url("../static/assets/ancientCanalsLeft/title1.png")
        no-repeat;
      background-size: 100% 100%;
      font-family: "TitleFontFamily";
      color: #fff;
    }
    .grid_content {
      box-sizing: border-box;
      padding: 0px 10px;
      height: calc(100% - 32px);
      width: 100%;
    }
    .show-img {
      width: 400px;
      height: 108px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .text-box {
      margin-top: 7px;
      font-size: 13px;
      text-indent: 2rem;
      padding: 4px 7px;
      box-sizing: border-box;
      overflow: hidden;
      line-height: 1.45;
      height: calc(100% - 103px);
      max-height: calc(100% - 125px);
      font-family: "TextFontFamily";
      width: 100%;
      color: #fff;
    }
  }
  //左侧布局中间盒子
  .combo-center-box {
    width: 100%;
    height: 230px;
    margin-bottom: 12px;
    background: url("../static/assets/ancientCanalsLeft/new-back.png")
      no-repeat;
    background-size: 100% 100%;
    .grid_title {
      position: relative;
      left: -15px;
      top: -5px;
      padding: 0px 55px;
      margin-left: 7px;
      width: calc(100% - 8px);
      height: 47px;
      box-sizing: border-box;
      font-size: 22px;
      line-height: 52px;
      background: url("../static/assets/ancientCanalsLeft/title1.png")
        no-repeat;
      background-size: 100% 100%;
      font-family: "TitleFontFamily";
      color: #fff;
    }
    .grid_content {
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
      align-items: center;
      padding: 20px 20px;
      justify-content: center;
      height: calc(100% - 47px);
      width: 100%;
      .card-item {
        font-family: "TextFontFamily";
        font-size: 14px;
        width: 165px;
        height: 60px;
        margin: 0px 5px;
        background: url("../static/assets/ancientCanalsLeft/card-back.png")
          no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        padding: 0px 25px;
        box-sizing: border-box;
        .label {
          width: 65%;
          color: #cec7b7;
        }
        .value {
          color: #fff;
          > span {
            display: inline-block;
            img {
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
  //左侧布局底部盒子
  .combo-bottom-box {
    width: 100%;
    height: 320px;
    background: url("../static/assets/ancientCanalsLeft/new-back.png")
      no-repeat;
    background-size: 100% 100%;
    .grid_title {
      position: relative;
      left: -15px;
      top: -5px;
      padding: 0px 55px;
      margin-left: 7px;
      width: calc(100% - 8px);
      height: 47px;
      box-sizing: border-box;
      font-size: 22px;
      line-height: 52px;
      background: url("../static/assets/ancientCanalsLeft/title1.png")
        no-repeat;
      background-size: 100% 100%;
      font-family: "TitleFontFamily";
      color: var(--componentTitle);
    }

    .grid-charts {
      // width: 500px;
      // height: 234px;
      width: 100%;
      height: 273px;
      // margin-top: 19px;
      // margin-left: 10px;
    }
  }
}
</style>
